<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创新研发-工艺流程</title>
  <!-- 链入css初始化 -->
  <link rel="stylesheet" href="../../css/base.css">
  <!-- 链入头部和底部通用样式 -->
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/main.css">
  <!-- 链入首页主体样式 -->
  <link rel="stylesheet" href="../../css/index.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="../../css/idangerous.swiper.css">
  <link rel="stylesheet" type="text/css" href="../../css/animate.css">
  <link rel="stylesheet" type="text/css" href="../../css/style.css">
  <link rel="stylesheet" type="text/css" href="../../css/culture/list2.css">
  <!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->
</head>
<style>
  /* 全屏滚动需要设置 */
  html,
  body,
  .swiper-container,
  .swiper-wrapper,
  .swiper-slide {
    width: 100%;
    height: 100%;
  }

  .swiper-container {
    /* height: 998px; */
  }

  .swiper-slide {
    background-position: 50% 50%;
    position: relative;
  }

  /* 焦点需要设置 */
  .pagination1 {
    position: absolute;
    z-index: 100;
    left: 50%;
    margin-left: -60px;
    bottom: 40px;
  }

  .swiper-pagination-switch {
    /* width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 50%; */

    width: 28px;
    height: 8px;
    border-radius: 0;
    display: inline-block;
    margin: 7px 7px 13px;
    cursor: pointer;
    border: none;
    background: #fffafc;
  }

  .swiper-pagination-switch:hover,
  .swiper-active-switch {
    background: #068F1F;
  }

  .arrow-left {
    background: url(img/production/back.png) no-repeat left top;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -25px;
    width: 28px;
    height: 51px;
    z-index: 10;
  }

  .arrow-right {
    background: url(img/production/arrow.png) no-repeat left bottom;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -25px;
    width: 28px;
    height: 51px;
    z-index: 10;
  }

  .pagination1>span::after {
    width: 40px;
    height: 40px;
    background-image: url('../../img/production/icon2-1.png');
  }
</style>

<body>
  <header></header>

  <div class="productList-container">
    <div class="common-container-img">
      <img class="bannerPc" src="../../img/new/banner_02.jpg" alt="">
      <img class="bannerMb" src="../../img/new/banner_02.jpg" alt="">
      <ul class="common-container-type clearfix wow fadeInUpBig">
        <li onclick="window.open('list.html')"><img class="hides" src="../../img/select.jpg" alt=""><img class="icon"
            src="../../img/new/icon1.png" alt=""><span>公司研发</span></li>
        <li onclick="window.open('list1.html')"><img class="hides" src="../../img/select.jpg" alt=""><img class="icon"
            src="../../img/new/icon-1.png" alt=""><span>品质保障</span></li>
        <li class="active"><img class="hides" src="../../img/select.jpg" alt=""><img class="icon"
            src="../../img/new/icon-2-1.png" alt=""><span>工艺流程</span></li>
      </ul>
    </div>
    <div class="process wow fadeInUpBig wow fadeInUpBig">
      <div class="swiper-container">
        <a class="arrow-left" href="#"></a>
        <a class="arrow-right" href="#"></a>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="" src="../../img/banner1.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img class="" src="../../img/banner3.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img class="" src="../../img/banner4.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="pagination1"></div>
    </div>
  </div>
  <footer></footer>

  <script src="../../js/jquery-1.11.3.min.js"></script>
  <script src="../../public/idangerous.swiper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <script src="../../js/common.js"></script>
  <script type="text/javascript">
    $(function () {
      init()
      // $('.productList-container-type li').click(function () {
      //   var setTitle = $(this).find('span').html().split('类')[0]
      //   setDomEle(setTitle)
      $('.selected').css({ 'background': 'url(../../img/select.jpg) no-repeat 100% 100%', 'color': '#fff', 'background-size': 'cover' }).find('span').css({ 'color': '#fff' })
      // })
      function swiperRun() {
        // 横向滚动
        var viewSwiper = new Swiper('.swiper-container', {
          autoplay: 1000,
          visibilityFullFit: true,
          speed: 1500,
          loop: true,
          grabCursor: true,
          pagination: '.pagination1',
          paginationClickable: true,
          onSlideChangeStart: function () {
            // updateNavPosition()
          }
        })

        $('.arrow-left,.preview .arrow-left').on('click', function (e) {

          e.preventDefault()
          if (viewSwiper.activeIndex == 0) {
            viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);
            return
          }
          viewSwiper.swipePrev()
        })
        $('.arrow-right,.preview .arrow-right').on('click', function (e) {

          e.preventDefault()
          if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
            viewSwiper.swipeTo(0, 1000);
            return
          }
          viewSwiper.swipeNext()
        })
        function updateNavPosition() {
          $('.preview .active-nav').removeClass('active-nav')
          var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
          if (!activeNav.hasClass('swiper-slide-visible')) {
            if (activeNav.index() > previewSwiper.activeIndex) {
              var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
              previewSwiper.swipeTo(activeNav.index() - thumbsPerNav)
            } else {
              previewSwiper.swipeTo(activeNav.index())
            }
          }
        }
      }

      function init() {

        $('header').load('../../template/header.html')
        $('footer').load('../../template/footer.html')

        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
          new WOW().init();
        };

        swiperRun()
      }
    })
  </script>
</body>

</html>